import './index.less';
import moment from 'moment';
import { TaskT } from '../..';
import { DatePicker, Form, Input, Select } from 'antd';
import DivideLine from '@/components/Divider';
import TagList from '../TagList';
import MarkdownEditor from '@/components/MarkdownEditor';
import TButton from '@/components/TButton';

moment.locale('zh-CN');

const { RangePicker } = DatePicker;
const { Option } = Select;

interface IProps {
  task: TaskT;
  tagList?: string[];
  onSubmit: (values: TaskT) => void;
}

export default function TaskItem(props: IProps) {
  const { task, tagList = [], onSubmit } = props;

  const handleSubmit = (values: any) => {
    if (task) {
      const { title, desc, tags, range } = values;
      const [startTime, endTime] = range;
      const modifiedTask = Object.assign({}, task, {
        startTime,
        endTime,
        title,
        desc,
        tags,
      });
      onSubmit?.(modifiedTask);
    }
  };

  const renderForm = () => {
    const formConfig = [
      {
        label: '任务名称',
        filed: 'title',
        required: true,
        message: '任务名称不能为空',
        component: () => <Input size="small" />,
      },
      {
        label: '描述',
        filed: 'desc',
        component: () => <MarkdownEditor />,
      },
      {
        label: '任务标签',
        filed: 'tags',
        component: () => (
          <Select
            mode="tags"
            placeholder="新增任务标签"
            size="small"
          >
            {tagList?.map((i) => (
              <Option key={i} value={i}>
                {i}
              </Option>
            ))}
          </Select>
        ),
      },
      {
        label: '开始日期',
        filed: 'range',
        component: () => (
          <RangePicker
            size="small"
            ranges={{
              今日任务: [moment(), moment()],
              明日任务: [moment().add(1, 'day'), moment().add(1, 'day')],
              本月: [moment().startOf('month'), moment().endOf('month')],
            }}
            showTime
          />
        ),
      },
    ];

    return (
      <div className="task-item__editor">
        <Form
          name="basic"
          onFinish={handleSubmit}
          autoComplete="off"
          initialValues={{
            title: task.title,
            desc: task.desc,
            tags: task.tags,
            range: [task.startTime, task.endTime],
          }}
        >
          {formConfig.map((i) => (
            <div className="form-item__container" key={i.filed}>
              <div className="form-item__icon">{i.label}</div>
              <div className="form-item__comp">
                <Form.Item
                  name={i.filed}
                  rules={[
                    { required: i.required || false, message: i.message || '' },
                  ]}
                >
                  {i.component()}
                </Form.Item>
              </div>
            </div>
          ))}
          <Form.Item>
            <TButton submit fullWidth>
              更新
            </TButton>
          </Form.Item>
        </Form>
      </div>
    );
  };

  return (
    <div className="col-4-lg col-6-md col-12-sm">
      <div className="task-item">
        <TagList task={task} />
        <DivideLine />
        {renderForm()}
      </div>
    </div>
  );
}
